<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="template.xhtml">
	<ui:define name="body">
		<f:view>
			<h:form id="form1">
				<table>
				<tr>
					<td width="30%" valign="top">
						<h:panelGroup>
					        <rich:dataGrid value="#{addressBookController.addressBooks}" var="addressBook" columns="1" elements="3" width="340px">
				                <f:facet name="header">
				                    <h:outputText value="Address Books" />
				                </f:facet>
					            <rich:panel>
					                <f:facet name="header">
					                    <h:outputText value="#{addressBook.title}" />
					                </f:facet>
					                <h:panelGrid columns="2">
					                    <h:outputText value="Created on" style="font-size:12px" />
					                    <h:outputText value="#{addressBook.creationDateFormatted}" style="font-size:12px" />
					                    <rich:spacer />
					                    <h:outputText value="#{addressBook.numOfContacts} Contacts" style="font-size:12px" />
					                </h:panelGrid>
					            </rich:panel>
					            <f:facet name="footer">
					                <rich:datascroller id="scroller" />
					            </f:facet>
					        </rich:dataGrid>
					        <br/>
					        <a4j:commandButton id="btn_addNew" value="Add new" action="addressBook" />
						</h:panelGroup>
					</td>
					<td width="70%" valign="top" align="left">		
						<!-- Search Box -->
						<rich:panel id="pnl_search" style="width:600px">
			                <f:facet name="header">
			                    <h:outputText value="Search with Hibernate" style="font-size:12px" />
			                </f:facet>					
		                    <h:outputText value="Use the box below to search for an address book title or a contact name/email. It's powered by Hibernate Search and you can use * the wildcard for searching. Hint: go for j*" 
		                    	style="font-size:12px" />
	                    	<br/>
			                <h:panelGrid columns="2">
			                    <h:outputText value="Search" />
			                    <h:inputText id="searchText" value="#{addressBookController.searchText}" />
			                    <rich:spacer />
			                    <a4j:commandButton id="btn_search" value="Search" reRender="tbl_searchResult" action="#{addressBookController.doSearch}" style="width:150px" />
			                </h:panelGrid>
			                <br/>		        
			                <rich:dataTable id="tbl_searchResult" binding="#{addressBookController.tblSearchResult}"
			                    cellpadding="0" cellspacing="0" width="550" 
		                       	value="#{addressBookController.addressBookSearchResult}" var="addressbook">
			                    <f:facet name="header">
			                        <rich:columnGroup>
			                            <rich:column colspan="2">
			                                <h:outputText value="Address Books" />
			                            </rich:column>
			                            <rich:column breakBefore="true">
			                                <h:outputText value="Name" />
			                            </rich:column>
			                            <rich:column>
			                                <h:outputText value="Email" />
			                            </rich:column>
			                        </rich:columnGroup>
			                    </f:facet>
								<rich:column colspan="2">
									<h:panelGrid columns="4">
					                    <a4j:commandLink id="lnk_addContact" action="#{addressBookController.addContactToAddressBook}" style="color: white" title="Add Contact">
					                    	<h:graphicImage value="/images/add_contact.png" style="width:16; height:16" />
					                    </a4j:commandLink>
					                    <h:commandLink id="lnk_editAddressBook" action="#{addressBookController.editAddressBook}" style="color: white" title="Edit Address Book">
					                    	<h:graphicImage value="/images/edit.png" style="width:16; height:16" />
					                    </h:commandLink>
					                    <h:outputLink id="lnk_versions" value="addressBook_versions.jsf?addressBookID=#{addressbook.id}" style="color: white" title="Versions">
					                    	<h:graphicImage value="/images/versions.png" style="width:16; height:16" />
					                    </h:outputLink>
					                    <h:outputText value="#{addressbook}" style="font-size:12px" />
									</h:panelGrid>
								</rich:column>
		
			                    <rich:subTable value="#{addressbook.contacts}" var="contact"
			                    			binding="#{addressBookController.tblContacts}">
			                        <rich:column>
					                    <a4j:commandLink id="lnk_editContact" action="#{addressBookController.editContact}" style="color: white" title="Edit Contact">
					                    	<h:graphicImage value="/images/edit.png" style="width:16; height:16" />
					                    </a4j:commandLink>			                        
					                    <h:outputLink value="contact_versions.jsf?contactID=#{contact.id}" style="color: white" title="Versions">
					                    	<h:graphicImage value="/images/versions.png" style="width:16; height:16" />
					                    </h:outputLink>
			                            <h:outputText value="#{contact.name}" />
			                        </rich:column>
			                        <rich:column>
			                            <h:outputText value="#{contact.email}" />
			                        </rich:column>
			                    </rich:subTable>
			                </rich:dataTable>
						</rich:panel>
					</td>
				</tr>
				</table>
			</h:form>
		</f:view>		
	</ui:define>
</ui:composition>